<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>故障历史统计</title>
		<link rel="stylesheet"
			href='#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css' />
		<style>
.dataTable th {
	white-space: nowrap !important;
}

.box-num {
	font-size: 30px;
	margin: 5px;
}

.no-data {
	height: 250px;
	margin-top: 40px;
	margin-left: 30px;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="info-box bg-yellow">
			<span class="info-box-icon"> <i class='icon ion-pie-graph' />
			</span>
			<div class="info-box-content" style="padding-left: 40px;">
				<span class="info-box-text" style="font-size: 20px;" id="selectName"> <!-- #{request.getParameter('selectName')}  --></span>
				历史故障共计：<span id="countSpanNumber" class="box-num">0</span>次
			</div>
		</div>
		<div class="nav-tabs-custom">
			<ul class="nav nav-tabs pull-left">
				<li class="active"><a href="#faultCount" id="faultTab" data-toggle="tab">故障统计</a></li>
				<li><a href="#icePanel" id="iceTab" data-toggle="tab">覆冰</a></li>
				<li><a href="#thunderPanel" id="thunderTab" data-toggle="tab">雷击</a></li>
			</ul>
			<div class="tab-content no-padding">
				<div class="chart tab-pane active" id="faultCount" style="position: relative">
					<div class="col-md-12">
						<div>
							<h3>历年故障</h3>
							<small style="color: #777">点击柱状图查看详细</small>
						</div>
						<div id="yearBarChart" style="height: 250px; width: 100%;" />
					</div>
					<div class="collapse" id="yearFaultTableDiv">
						<table id="yearFaultTable" class="table table-bordered table-hover" />
					</div>
					<div class="row">
						<div class="col-lg-6 col-xs-6">
							<div class="box box-primary">
								<div class="box-body">
									<h3 style="margin-top: 0px;">故障原因统计</h3>
									<small style="color: #777">点击柱状图查看详细</small>
									<div id="reasonBarChart" style="height: 250px; width: 100%;"></div>
								</div>
							</div>
						</div>
						<div class="col-lg-6 col-xs-6">
							<div class="box box-primary">
								<div class="box-body">
									<h3 style="margin-top: 0px;">故障原因比例</h3>
									<small style="color: #777">点击饼分图查看详细</small>
									<div id="reasonPieChart" style="height: 250px; width: 100%;"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse" id="reasonFaultTableDiv">
						<table id="reasonFaultTable" class="table table-bordered table-hover" />
					</div>
				</div>
				<div class="chart tab-pane" id="icePanel" style="position: relative">
					<div class="col-lg-12 col-xs-12" style="margin-top: 20px; margin-bottom: 10px; height: 90px;">
						<div class="info-box" style="margin-bottom: 0;">
							<span class="info-box-icon bg-aqua "><i class="fa fa-snowflake-o"></i></span>
							<div class="info-box-content">
								<ul>
									<li class="info-box-text" style="font-size: 18px">覆冰记录：<span id="iceNum"
										class="box-num">0</span>天
									</li>
									<li class="info-box-text" style="font-size: 18px">覆冰故障：<span id="iceFaultNum"
										class="box-num">0</span>次
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-lg-12 col-xs-12">
						<div class="box box-primary">
							<div class="box-body">
								<h3 style="margin-top: 0;">
									覆冰记录<small id="iceSum" style="margin-left: 5px;"></small>
								</h3>
								<small style="color: #777">----取全天全线最大覆冰厚度</small>
								<div id="iceChart" style="height: 350px; width: 100%;" />
							</div>
						</div>
					</div>
					<div class="col-lg-12 col-xs-12">
						<div class="box box-primary">
							<div class="box-body">
								<h3 style="margin-top: 0;">
									覆冰故障<small id="iceFaultSum" style="margin-left: 5px;"></small>
								</h3>
								<small style="color: #777">----历史上因覆冰发生的故障</small>
								<table id="iceTable" class="table table-bordered table-hover">
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="chart tab-pane" id="thunderPanel" style="position: relative">
					<div class="col-lg-12 col-xs-12" style="margin-top: 20px; margin-bottom: 10px; height: 90px;">
						<div class="info-box" style="margin-bottom: 0;">
							<span class="info-box-icon bg-yellow"><i class="fa  fa-flash"></i></span>
							<div class="info-box-content">
								<ul>
									<li class="info-box-text" style="font-size: 18px">雷击记录：<span id="thunderNum"
										class="box-num">0</span>天
									</li>
									<li class="info-box-text" style="font-size: 18px">雷击故障：<span id="thunderFaultNum"
										class="box-num">0</span>次
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-lg-12 col-xs-12">
						<div class="box box-warning">
							<div class="box-body">
								<h3 style="margin-top: 0;">
									雷击记录<small id="thunderSum" style="margin-left: 5px;"></small>
								</h3>
								<small style="color: #777">----线路附近<span id="thunderRadius"></span>m区域内全天雷击次数
								</small>
								<div id="thunderChart" style="height: 350px; width: 100%;" />
							</div>
						</div>
					</div>
					<div class="col-lg-12 col-xs-12">
						<div class="box box-warning">
							<div class="box-body">
								<h3 style="margin-top: 0;">
									雷击故障<small id="thunderFaultSum" style="margin-left: 5px;"></small>
								</h3>
								<small style="color: #777">----历史上因雷击发生的故障</small>
								<table id="thunderTable" class="table table-bordered table-hover">
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<h:inputHidden id="lineName" value="#{request.getParameter('selectName')}"></h:inputHidden>
		<h:inputHidden id="lineId" value="#{request.getParameter('selectId')}"></h:inputHidden>
	</ui:define>

	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryLineChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/charts.js"></script>
		<script src="#{request.contextPath}/resources/js/array-util.js"></script>
		<script src="#{request.contextPath}/resources/js/date-util.js"></script>
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script src="lineFaultHisDialog.js"></script>
		<script src="iceFaultDialog.js"></script>
		<script src="thunderFaultDialog.js"></script>
		<script>
			var lineId;
			var iceChart;
			var thunderChart;
			var yearBarChart;
			var reasonBarChart;
			var reasonPieChart;

			var lineFaultPart = new LineFaultPart();
			var icePart = new IcePart();
			var thunderPart = new ThunderPart();

			$(function() {
				if ($("#lineName")) {
					var lineName = decodeURIComponent($("#lineName").val());
					$("#selectName").html(lineName);
				}
				lineId = $('#lineId').val();
				lineFaultPart.load();
				icePart.load();
				thunderPart.load();
				//打开页面时echart有时获取不到div的size，所以需要resize
				var t1 = window.setInterval(function() {
					var w = document.body.clientWidth + "";
					if (w != '0') {
						window.clearInterval(t1);
						lineFaultPart.resizeChart();
					}
				}, 20);
			});
			$("#faultTab").on('click', function() {
				var t0 = window.setInterval(function() {
					var w = parseInt($('#faultCount').css('width'));
					if (w != '0') {
						window.clearInterval(t0);
						lineFaultPart.resizeChart();
					}
				}, 20);
			});
			$("#iceTab").on('click', function() {
				var t2 = window.setInterval(function() {
					var w = parseInt($('#icePanel').css('width'));
					if (w != '0') {
						window.clearInterval(t2);
						icePart.resizeHtml();
					}
				}, 20);
			});
			$("#thunderTab").on('click', function() {
				var t3 = window.setInterval(function() {
					var w = parseInt($('#thunderPanel').css('width'));
					if (w != '0') {
						window.clearInterval(t3);
						thunderPart.resizeHtml();
					}
				}, 20);
			});
			function resizeHtml() {
				lineFaultPart.resizeChart();
				icePart.resizeHtml();
				thunderPart.resizeHtml();
			}
		</script>
	</ui:define>
</ui:composition>
